<template>
	<div class="header-box">
		<div class="container">
			<nav class="navbar navbar-expand-lg navbar-light bg-imartig">
			  <a class="navbar-brand" href="/">
				  <img src="../../assets/images/logo.png" alt="">
			  </a>
			  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			  </button>
			  <div class="collapse navbar-collapse" id="navbarSupportedContent">
				<ul class="navbar-nav mr-right-auto">
					<router-link to="/" exact>
						<li class="nav-item">
							<span class="nav-link">首页</span>
						</li>
					</router-link>
				  <router-link to="/grade" exact>
				  	<li class="nav-item">
				  		<span class="nav-link">评级</span>
				  	</li>
				  </router-link>
				  <router-link to="/news" exact>
				  	<li class="nav-item">
				  		<span class="nav-link">快讯</span>
				  	</li>
				  </router-link>
				</ul>
				
			  </div>
			</nav>
		</div>
	</div>
</template>
<style scoped="scoped">
	.header-box{
		width: 100%;
		background-color: #0f7dea;
	    position: fixed;
		left: 0;
		top: 0;
		z-index: 1030;
	}
	.navbar-brand img{
		height: 40px;
	}
	.navbar-light .navbar-nav .nav-link{
		color: #FFFFFF;
	}
	.mr-right-auto{
		margin-left: auto!important;
	}
	
	.nav-item{
		margin: 0 15px;
	}
	.router-link-active .nav-item{
		border-bottom: 2px solid #FFFFFF;
	}
</style>